<template>
  <div class="wechat-page">
    <el-card class="wechat-card">
      <template #header>
        <div class="title">微信公众号</div>
        <div class="tips">接入后你可以使用智能在线客服系统统一接收与回复顾客咨询</div>
      </template>
      <div class="wechat-content">
        <el-button type="primary" @click="bindWechat">去微信平台授权绑定</el-button>
        <p class="note">* 你的公众号必须是认证过的微信订阅号或服务号，否则无法正常回复顾客对话</p>
        <el-divider></el-divider>
        <div class="wechat-account">
          <el-card class="account-card" v-if="dataObj.nickName">
            <div class="account-info">
              <img :src="dataObj.headImg" alt="WeChat Logo" class="wechat-logo" />
              <div class="account-details">
                <p>{{ dataObj.nickName || "-" }}</p>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { getComponentLoginPage, GetBindList } from "@/api/node-admin-api/chat.js";
import { successMessage, warnMessage, errorMessage } from "@/utils/message";
import {
  onActivated,
  onDeactivated,
  onMounted,
  onUnmounted,
  ref,
  watchEffect,
  getCurrentInstance,
} from "vue";
const { shell } = require("electron");

// 打开默认浏览器并导航到授权页面

const bindWechat = () => {
  // 模拟微信绑定功能
  getComponentLoginPage({ authType: 1 })
    .then((res) => {
      if (res.code == 20000) {
        console.log("res: ", res.data.url);
        shell.openExternal(`https://kf.xurj.top/#/redirectUri?uuurl=${res.data.url}`);
      }
    })
    .catch((e) => {
      errorMessage(e.message);
    });
};

onMounted(() => {
  getDetail();
});

const dataObj = ref({});
const getDetail = () => {
  GetBindList({ type: 0 }).then((res) => {
    if (res.code == 20000) {
      dataObj.value = res.data.result;
    }
  });
};

const unbindWechat = () => {
  // 模拟解除绑定功能
  ElMessage.success("已解除绑定");
};
</script>

<style scoped>
.wechat-page {
  padding: 20px;
}

.wechat-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.wechat-content {
  padding: 20px;
}

.note {
  color: #999;
  font-size: 12px;
  margin-top: 10px;
}

.wechat-account {
  margin-top: 20px;
}

.account-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #dcdcdc;
}

.account-info {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.wechat-logo {
  width: 50px;
  height: 50px;
  margin-right: 20px;
}

.account-details {
  flex: 1;
}

.el-link {
  margin-left: 20px;
}
</style>
